<meta charset="UTF-8">
 
 <style>
     * {
         margin: 0;
         padding: 0;
     }

     body {
         background: gray;
     }

     ul {
         width: 300px;
         height: 200px;
         background: pink;
         border: 1px solid red;
     }
     ul li{
         background: green;
     }

     /*提示框容器*/
     .tip {
         position: relative;
         margin-left: 20px;
         margin-top: 20px;
         width: 200px;
         background: #fff;
         padding: 10px;
         border-radius: 5px;
         display: none;
     }

     /*提示框-下三角*/
     .tip-trangle-bottom {
         position: absolute;
         top: -10px;
         width: 0;
         height: 0;
         border-left: 15px solid transparent;
         border-right: 15px solid transparent;
         border-bottom: 15px solid #fff;
     }
 </style>

 </head>

 <body>
     <ul>
         <li>0001</li>
         <li>0002</li>
         <li>0003</li>
         <li>0004</li> 
         <div class="tip">
            <div class="tip-trangle-bottom"></div>
            已进入li区域
        </div>
     </ul>
    
     <script>
         var liObj = document.querySelectorAll('li')
         var tipObj = document.querySelector('.tip')
         liObj.forEach(function(item){
            item.onmouseover = function (evt) {
                var e=evt || window.event
                // tipObj.style.position
                tipObj.style.display = 'block'
         }
         item.onmouseout = function () {
             tipObj.style.display = 'none'
         }
         })
         
     </script>
 </body>